<template>
	<div class="alarmmsgdiv">
		<div class="alarmcircle">
			<div class="alarmnum">
				<div class="totalnum">
					<p style="font-size: 44px;margin: 0;padding: 0;margin-top: 40px;line-height: 60px;">247</p>
					<p>接入设备总数</p>
				</div>
				<div class="equippercent" style="margin-top: 2px;">
					<div class="equipcharts" >
						<div id="Devicetypecharts" style="width: 80%;height: 80%;margin-left: 10%;margin-top: 15px;"></div>
					</div>
					<div class="Epercent">设备完好率</div>
				</div>
			</div>
			<div class="alarmindex">
				<div class="seriousalarm">
					<div id="seriouscharts" style="width: 100%;height: 100%;"></div>
					<span style="text-align: center;">严重告警</span>
				</div>
				<div class="urgentalarm">
					<div id="urgentpecharts" style="width: 100%;height: 100%;"></div>
					<span style="text-align: center;">紧急告警</span>
				</div>
				<div class="normalalarm">
					<div id="normalpecharts" style="width: 100%;height: 100%;"></div>
					<span style="text-align: center;">一般告警</span>
				</div>
			</div>
		</div>
		<div class="alarmlists">
			<a>告警列表</a>
			
			<vue-seamless-scroll :data="alarmlist" :class-option="classOption" class="equipslist" v-if='havedata'>
				<ul>
					<li v-for="list in alarmlist" style="width: 100%;">
						<span style="color:#fdd000;margin-left: 0px;float: left;width: 50%;"> {{list.msg}}</span><span style="float: left;width: 40%;">{{list.time}}</span>
					</li>
				</ul>
			</vue-seamless-scroll>
			<div class="nodata" v-if="alarmnodata">
				<img style="margin-left: 5%;margin-top: 5%;" src="../../../../public/home/nodata.png" />
			</div>
		</div>
		<div class="alarmchart">
			<div class="monthlist">
				<span style="cursor: pointer;" v-for="(num,index) in checklist" :class="active == index ? 'addclass' : '' " @click="selectmonth(num.code,index)">{{num.name}}</span>
			</div>
			<div id="equiplinecharts" style="width: 100%;height: 100%;"></div>
		</div>
	</div>
</template>

<script>
	import echarts from 'echarts';
	export default {
		components: {

		},
		data() {
			return {
				active: 0,
				alarmnodata: false,
				havedata: true,
				checklist: [{
					code: 1,
					name: '近一个月'
				}, {
					code: 3,
					name: '近三个月'
				}, {
					code: 6,
					name: '近半年'
				}, {
					code: 12,
					name: '近一年'
				}],
				alarmlist: [{
						msg: "成都收费站CPU占用过高",
						time: "2019-11-10 12:15",

					},
					{
						msg: "高寿收费站CPU占用过高",
						time: "2019-11-11 15:13",
					},
					{
						msg: "兴隆收费站CPU占用过高",
						time: "2019-11-15 14:15",
					},
					//					{
					//						msg: "安岳收费站CPU占用过高",
					//						time: "2019-11-10 14:15",
					//					},
					//					{
					//						msg: "安岳收费站CPU占用过高",
					//						time: "2019-11-10 14:15",
					//					},
					//					{
					//						msg: "安岳收费站CPU占用过高",
					//						time: "2019-11-10 14:15",
					//					},
					//					{
					//						msg: "安岳收费站CPU占用过高",
					//						time: "2019-11-10 14:15",
					//					},
					//					{
					//						msg: "安岳收费站CPU占用过高",
					//						time: "2019-11-10 14:15",
					//					},

				],
				equiplist1:				
				{
					"month1": [{
							"datetime": "2019-12-10",
							"count": 4,
							"allCount": null
						},
						{
							"datetime": "2019-12-16",
							"count": 2,
							"allCount": null
						},
						{
							"datetime": "2019-12-17",
							"count": 2,
							"allCount": null
						},
						{
							"datetime": "2019-12-18",
							"count": 7,
							"allCount": null
						},
						{
							"datetime": "2020-1-10",
							"count": 5,
							"allCount": null
						}
						
					],
					"month2": [{
							"datetime": "2019-11-10",
							"count": 4,
							"allCount": null
						},
						{
							"datetime": "2019-12-16",
							"count": 2,
							"allCount": null
						},
						{
							"datetime": "2019-12-17",
							"count": 2,
							"allCount": null
						},
						{
							"datetime": "2019-12-18",
							"count": 7,
							"allCount": null
						},
						{
							"datetime": "2019-12-19",
							"count": 5,
							"allCount": null
						},
						{
							"datetime": "2019-12-20",
							"count": 4,
							"allCount": null
						},
						{
							"datetime": "2019-12-21",
							"count": 2,
							"allCount": null
						},
						{
							"datetime": "2019-12-22",
							"count": 5,
							"allCount": null
						},
						{
							"datetime": "2019-12-23",
							"count": 8,
							"allCount": null
						},
						{
							"datetime": "2020-01-10",
							"count": 5,
							"allCount": null
						}
					],
					"month3": [{
							"datetime": "2019-07-10",
							"count": 4,
							"allCount": null
						},
						{
							"datetime": "2019-12-21",
							"count": 2,
							"allCount": null
						},
						{
							"datetime": "2019-12-22",
							"count": 2,
							"allCount": null
						},
						{
							"datetime": "2019-12-23",
							"count": 7,
							"allCount": null
						},
						{
							"datetime": "2019-12-24",
							"count": 5,
							"allCount": null
						},
						{
							"datetime": "2019-12-25",
							"count": 9,
							"allCount": null
						},
						{
							"datetime": "2019-12-26",
							"count": 5,
							"allCount": null
						},
						{
							"datetime": "2019-12-27",
							"count": 4,
							"allCount": null
						},
						{
							"datetime": "2019-12-28",
							"count": 2,
							"allCount": null
						},
						{
							"datetime": "2019-12-29",
							"count": 6,
							"allCount": null
						},
						{
							"datetime": "2019-12-30",
							"count": 3,
							"allCount": null
						},
						{
							"datetime": "2020-1-1",
							"count": 2,
							"allCount": null
						},
						{
							"datetime": "2020-1-2",
							"count": 8,
							"allCount": null
						},
						{
							"datetime": "2020-1-3",
							"count": 5,
							"allCount": null
						},
						{
							"datetime": "2020-01-10",
							"count": 8,
							"allCount": null
						}
					],
					"month4": [{
							"datetime": "2019-01-10",
							"count": 1,
							"allCount": null
						},
						{
							"datetime": "2019-12-21",
							"count": 2,
							"allCount": null
						},
						{
							"datetime": "2019-12-22",
							"count": 2,
							"allCount": null
						},
						{
							"datetime": "2019-12-23",
							"count": 7,
							"allCount": null
						},
						{
							"datetime": "2019-12-24",
							"count": 5,
							"allCount": null
						},
						{
							"datetime": "2019-12-25",
							"count": 4,
							"allCount": null
						},
						{
							"datetime": "2019-12-26",
							"count": 6,
							"allCount": null
						},
						{
							"datetime": "2019-12-27",
							"count": 8,
							"allCount": null
						},
						{
							"datetime": "2019-12-28",
							"count": 3,
							"allCount": null
						},
						{
							"datetime": "2019-12-29",
							"count": 9,
							"allCount": null
						},
						{
							"datetime": "2019-12-30",
							"count": 7,
							"allCount": null
						},
						{
							"datetime": "2020-1-1",
							"count": 3,
							"allCount": null
						},
						{
							"datetime": "2020-1-2",
							"count": 6,
							"allCount": null
						},
						{
							"datetime": "2020-1-3",
							"count": 9,
							"allCount": null
						},
						{
							"datetime": "2020-1-4",
							"count": 5,
							"allCount": null
						},
						{
							"datetime": "2020-1-5",
							"count": 8,
							"allCount": null
						},
						{
							"datetime": "2020-1-6",
							"count": 1,
							"allCount": null
						},
						{
							"datetime": "2020-1-7",
							"count": 3,
							"allCount": null
						},
						{
							"datetime": "2020-1-8",
							"count": 7,
							"allCount": null
						},
						{
							"datetime": "2020-1-10",
							"count": 3,
							"allCount": null
						},
					]					
				}								
			}

		},
		computed: {
			classOption() {
				return {
					//					step: 0.5, //速度，值越大，速度越快
					//					//                     limitMoveNum: 2,
					//					limitMoveNum: 5,
					//					hoverStop: true, //鼠标悬停效果，false为关闭该效果
					//		　　　　　　　　　singleHeight: 40, //单行停顿
					//		　　　　　　　　　waitTime: 2500, //单行停顿的时间
					step: 1.2, // 数值越大速度滚动越快
					limitMoveNum: 3, // 开始无缝滚动的数据量 this.dataList.length
					hoverStop: true, // 是否开启鼠标悬停stop
					direction: 1, // 0向下 1向上 2向左 3向右
					openWatch: true, // 开启数据实时监控刷新dom
					singleHeight: 40, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
					singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
					waitTime: 1200 // 单步运动停止的时间(默认值1000ms)
					　　　　　　　　
				}
			}
		},
		watch: {

		},
		mounted() {

			this.drawfaultequipsChart(80, "Devicetypecharts", '#00c800')
			this.drawfaultequipsChart(25, "seriouscharts", '#bc1515')
			this.drawfaultequipsChart(30, "urgentpecharts", '#e05009')
			this.drawfaultequipsChart(44, "normalpecharts", '#f1d808'),

				this.drawequipnumcharts("equiplinecharts", ['2019-12-10', '12-26', '12-27', '12-28', '12-29', '12-30', '2020-01-10'], [8, 2, 9, 7, 4, 7, 9]);
			console.log(this.alarmlist);
		},
		methods: {
			selectmonth(code, index) {
				console.log(code, index);
				this.active = index;
//				console.log(this.equiplist1);
				this.xdata1=[];
				this.ydata1=[];
				this.xdata2=[];
				this.ydata2=[];
				this.xdata3=[];
				this.ydata3=[];
				this.xdata4=[];
				this.ydata4=[];
				this.equiplist1.month1.map(item=>{
					console.log(item);
					this.xdata1.push(item.datetime);
					this.ydata1.push(item.count);
				})
				this.equiplist1.month2.map(item=>{
//					console.log(item);
					this.xdata2.push(item.datetime);
					this.ydata2.push(item.count);
				})
				this.equiplist1.month3.map(item=>{
//					console.log(item);
					this.xdata3.push(item.datetime);
					this.ydata3.push(item.count);
				})
				this.equiplist1.month4.map(item=>{
//					console.log(item);
					this.xdata4.push(item.datetime);
					this.ydata4.push(item.count);
				})
				console.log(this.xdata1);
				if(code == 1) {

					this.drawequipnumcharts("equiplinecharts",this.xdata1 , this.ydata1);
				}else if(code == 3){
					this.drawequipnumcharts("equiplinecharts",this.xdata2 , this.ydata2);
				}else if(code == 6){
					this.drawequipnumcharts("equiplinecharts",this.xdata3 , this.ydata3);
				}else if(code == 12){
					this.drawequipnumcharts("equiplinecharts",this.xdata4 , this.ydata4);
				}
			},
			drawfaultequipsChart(e, id, colora) {
				console.log("调用");
				// 基于准备好的dom，初始化echarts实例
				let trendChart = echarts.init(document.getElementById(id))

				window.addEventListener("resize", () => {
					trendChart.resize();
				});

				// 绘制图表
				let option = {
					backgroundColor: "#00082F",
					color: [colora, "#00082F"],
					title: {
						text: e + "%",
						x: 'center',
						y: 'center',
						itemGap: 20,
						textStyle: {
							color: '#ffffff',
							fontFamily: '微软雅黑',
							fontSize: 18,
							// fontWeight : 'bolder'
						}
					},
					tooltip: {
						trigger: "item",
						formatter: "{a} <br/> {d}%"
					},
					series: [{
						name: "占比",
						type: "pie",
						radius: ["65%", "80%"],

						avoidLabelOverlap: false,
						label: {
							normal: {
								show: false,
								position: "center"
							},
							emphasis: {
								show: true,
								textStyle: {
									fontSize: "15",
									fontWeight: "bold"
								}
							}
						},
						labelLine: {
							normal: {
								show: false
							}
						},
						itemStyle: {
							borderColor: '#053a76',
							borderWidth: 1,
						},
						data: [{
								value: e,
								name: ""
							},
							{
								value: 100 - e,
								name: ""
							}
						]
					}]
				}

				trendChart.setOption(option);

			},
			drawequipnumcharts(id, xdata, seriesdata) {
				console.log("调用");
				// 基于准备好的dom，初始化echarts实例
				let trendChart = echarts.init(document.getElementById(id))

				window.addEventListener("resize", () => {
					trendChart.resize();
				});

				// 绘制图表
				let option = {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'line',
							label: {
								backgroundColor: '#6a7985'
							}
						}
					},
					grid: {
						left: '8%',
						right: '10%',
						bottom: '1%',
						containLabel: true
					},
					color: ['#3695fd', '#49f3fc'],
					legend: {
						orient: 'vertical',
						top: 30,
						textStyle: {
							color: '#ffffff' // 图例文字颜色
						},
						//						data: legenddata
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						//						data: ['12-25', '12-26', '12-27', '12-28', '12-29', '12-30', '12-31'],
						data: xdata,
						axisLabel: {
						    margin: 10,
						    interval: 100000,
						    showMinLabel: true,
						    showMaxLabel: true,
						    textStyle: {
						        color: '#ffffff',
						        fontSize: 12,
						    }
						},
//						axisLine: {
//							lineStyle: {
//								color: '#4bc6f9',
//							}
//						},
						splitLine: {
							show: false
						},
						axisTick: {
							show: false
						}
					},
					yAxis: {
						type: 'value',
						name: "异常设备(个)",
						axisLine: {
							lineStyle: {
								color: '#4bc6f9',

							}
						},
						splitLine: {
							show: false
						},
						axisTick: {
							show: false
						}
					},
					series: [{
						//						data: [820, 932, 901, 934, 1290, 1330, 1320],
						data: seriesdata,
						type: 'line',
						symbol:'none',  //这句就是去掉点的  
           				smooth:true,  //这句就是让曲线变平滑的 
						areaStyle: {}
					}]
				};

				trendChart.setOption(option);
			}
		},
	}
</script>

<style lang='scss'>
	.alarmmsgdiv {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: row;
		color: #FFFFFF;
		overflow: hidden;
		.alarmcircle {
			flex: 5;
			display: flex;
			flex-direction: column;
			height: 93%;
			/*border:1px solid red;*/
			.alarmnum {
				flex: 3;
				display: flex;
				flex-direction: row;
				.totalnum {
					flex: 5;
					display: flex;
					flex-direction: column;
					margin-left: 12%;
					text-align: center;
				}
				.equippercent {
					flex: 5;
					display: flex;
					flex-direction: column;
					margin-right: 10%;
					.equipcharts {
						flex: 4;
						display: flex;
						flex-direction: column;
						/*border:1px solid red;*/
						padding: 0;
						margin: 0;
					}
					.Epercent {
						flex: 1;
						display: flex;
						flex-direction: column;
						text-align: center;
					}
				}
			}
			.alarmindex {
				flex: 3;
				display: flex;
				flex-direction: row;
				padding: 5px;
				.seriousalarm {
					flex: 4;
					display: flex;
					flex-direction: column;
				}
				.urgentalarm {
					flex: 4;
					display: flex;
					flex-direction: column;
				}
				.normalalarm {
					flex: 4;
					display: flex;
					flex-direction: column;
				}
			}
		}
		.alarmlists {
			flex: 6;
			display: flex;
			flex-direction: column;
			margin-left: 6%;
			height: 90%;
			margin-top: 1%;
			/*border: 1px solid green;*/
			a {
				width: 90px;
				height: 30px;
				background: #1293ee;
				color: #FFFFFF;
				border-radius: 4px;
				text-align: center;
				line-height: 30px;
				margin-top: 10px;
			}
			.equipslist {
				height: 80%;
				/*border: 1px solid red;*/
				margin-top: 2%;
				overflow: hidden;
				ul {
					margin: 0;
					padding: 0;
					/*margin-top: 20px;*/
					li {
						list-style: none;
						line-height: 40px;
						span {
							font-size: 14px;
						}
					}
				}
			}
		}
		.alarmchart {
			flex: 7;
			display: flex;
			flex-direction: column;
			
			height: 99%;
			/*border: 1px solid yellow;*/
			.monthlist {
				width: 70%;
				height: 10%;
				float: right;
				/*margin: 2%;*/
				margin-top: 2%;
				margin-left: 30%;
				/*border:1px solid red;*/
				/*margin-left: 10%;*/
				span {
					float: left;
					/*width: 10%;*/
					margin-left: 8%;
				}
				.addclass {
					border-bottom: 2px solid #307ccc;
				}
			}
		}
	}
</style>